<template>
  <div class="video-list">
    <el-row class="title-row">
      <el-col :span="2">热度</el-col>
      <el-col :span="8">作品</el-col>
      <el-col :span="14">简介</el-col>
    </el-row>
    <el-row align="middle" v-for="(video,index) in videoList" :key="video.id" @click="handleVideoClick(video.id)" class="video-list-item">
      <el-col :span="2" class="top">
				<img v-if="index==0" src="@/assets/image/program/top1.png"/>
				<img v-else-if="index==1" src="@/assets/image/program/top2.png"/>
				<img v-else-if="index==2" src="@/assets/image/program/top3.png"/>
				<div v-else class="idx">{{ index + 1 }}</div>
			</el-col>
      <el-col :span="8">
        <video :src="video.url" :poster="video.cover" muted controls></video>
      </el-col>
      <el-col :span="14">
        <div class="video-item">
          <div class="video-item-title">
            <span>{{ video.name }}</span>
          </div>
          <div class="video-item-content">
            <span>{{ video.remark }}</span>
          </div>
          <div>						
            <img :src="avatar? avatar: video.avatar" class="avatar"/>
            <span class="username">{{ username? username : video.userName }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <empty-data v-if="videoList.length==0"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter();

const props = defineProps({
  videoList: Array,
	avatar: String,
	username: String
})

const handleVideoClick = (id) => {
  router.push({ name: 'video-detail', params: { id: id } })
}

onMounted(() => {
  console.log(props.videoList)
})
</script>

<style lang="less" scoped>
.video-list {
  .title-row{
    background: #820000;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 16px;
  }
  .video-list-item {
    cursor: pointer;
		.top {
			text-align: center;
			img {
				width: 23px;
				height: 20px;
			}
			.idx {
				width: fit-content;
				margin-left: auto;
				margin-right: auto;
				font-weight: 500;
				font-size: 14px;
				color: #04172B;
				background: #DBE6EF;
				border-radius: 4px;
				padding: 0 6px;
			}
		}
    video {
      width: 100%;
      height: 180px;
      border-radius: 10px;
    }
    .video-item {
      margin-left: 30px;
      .video-item-title {
        font-size: 18px;
        font-weight: 600;
        color: #A30000;
        margin-bottom: 10px;
      }
      .video-item-content {
        font-size: 14px;
        color: #666;
        margin-bottom: 16px;
      }
      .username {
				font-weight: 600;
        margin-left: 5px;
        font-size: 14px;
        line-height: 28px;
        vertical-align: bottom;
      }
			.avatar {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				vertical-align: bottom;
			}
    }
  }
  .video-list-item + .video-list-item {
    margin-top: 16px; 
  }
}
</style>